<template>
  <div>
    <el-card shadow="never" v-for="(item, index) in cardData" :key="index">
      <!-- <div slot="header">供应商{{ item.suppType }}：</div> -->
      <!-- <el-form
        :ref="'form' + index"
        :model="item"
        :rules="rules"
        label-width="144px"
        class="ccui-form"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item
              label="供应商纳税人类型："
              :prop="item.suppType === 1 ? 'taxPayerType' : ''"
            >
              <el-select
                class="ccui-form-longInput"
                v-model="item.taxPayerType"
                @change="handleChange(item.taxPayerType, index)"
                placeholder="请选择供应商纳税人类型"
              >
                <el-option
                  v-for="item in jsList.supplierTaxpayerType"
                  :key="item.dicKey"
                  :label="item.dicValue"
                  :value="item.dicKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户名称：" prop="bankPersonName">
              <input
                class="el-input__inner"
                v-model="item.bankPersonName"
                placeholder="请输入账户名称"
                maxlength="254"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item
              label="开户行名称："
              :prop="item.suppType === 1 ? 'bankName' : ''"
            >
              <input
                class="el-input__inner"
                v-model="item.bankName"
                placeholder="请输入开户行名称"
                maxlength="254"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开户行账号："
              :prop="item.suppType === 1 ? 'bankId' : ''"
            >
              <input
                class="el-input__inner"
                v-model="item.bankId"
                placeholder="请输入开户行账号"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->

      <el-form
        :ref="'form' + index"
        :model="item"
        :rules="rules"
        label-width="144px"
        class="ccui-form"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="供应商纳税人类型：" prop="item.suppType">
              <el-select
                class="ccui-form-longInput"
                v-model="item.taxPayerType"
                @change="handleChange(item.taxPayerType, index)"
                placeholder="请选择供应商纳税人类型"
              >
                <el-option
                  v-for="item in jsList.supplierTaxpayerType"
                  :key="item.dicKey"
                  :label="item.dicValue"
                  :value="item.dicKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账户名称：" prop="bankPersonName">
              <input
                class="el-input__inner"
                v-model="item.bankPersonName"
                placeholder="请输入账户名称"
                maxlength="254"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="开户行名称：" prop="item.suppType">
              <input
                class="el-input__inner"
                v-model="item.bankName"
                placeholder="请输入开户行名称"
                maxlength="254"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行账号：" prop="item.suppType">
              <input
                class="el-input__inner"
                v-model="item.bankId"
                placeholder="请输入开户行账号"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import jsList from "../js/indexco";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "financeInfo",
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    // 是否是变更页面引用
    isChange: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardData: [
        {
          taxpayerName: "一般纳税人", // 供应商纳税人类型
          taxPayerType: "0", // 供应商纳税人类型 code
          bankPersonName: "", // 账户名称
          bankName: "", // 开户行名称
          bankId: "", // 开户行账号
          suppType: 1
        }
        // {
        //   taxpayerName: "一般纳税人", // 供应商纳税人类型
        //   taxPayerType: "0", // 供应商纳税人类型 code
        //   bankPersonName: "", // 账户名称
        //   bankName: "", // 开户行名称
        //   bankId: "", // 开户行账号
        //   suppType: 2
        // }
      ],
      rules: {
        taxPayerType: [
          {
            required: true,
            message: "请选择供应商纳税人类型",
            trigger: "change"
          }
        ],
        bankName: [
          { required: true, message: "请输入开户行名称", trigger: "blur" }
        ],
        bankId: [
          { required: true, message: "请输入开户行账号", trigger: "blur" }
        ]
      },
      timer: null
    };
  },
  computed: {
    ...mapGetters([
      "getSupplierObj",
      "getSupplierBObj",
      "getRemoveSupplier",
      "getRemoveSupplierB"
    ]),
    jsList: () => jsList
  },
  watch: {
    // 供应商1
    getSupplierObj(newVal) {
      this.watchSendSupplier(newVal, 0);
    },
    getRemoveSupplier(newVal) {
      if (newVal) this.watchResetSupplier("setRemoveSupplier", 0);
    },
    // 供应商2
    getSupplierBObj(newVal) {
      this.watchSendSupplier(newVal, 1);
    },
    getRemoveSupplierB(newVal) {
      if (newVal) this.watchResetSupplier("setRemoveSupplierB", 1);
    }
  },
  mounted() {
    this.init();

    this.$once("hook:beforeDestroy", () => {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    });
  },
  methods: {
    init() {
      if ((!this.isChange && this.detail.state === "edit") || this.isChange) {
        this.timer = setTimeout(() => {
          this.cardData = cloneDeep(this.detail.pcFinance);
          // if (this.cardData.length < 2) {
          //   this.cardData.push({ suppType: 2 });
          // }
        }, 500);
      }
    },

    handleChange(val, index) {
      this.cardData[index].taxpayerName = this.jsList.supplierTaxpayerType.find(
        _ => _.dicKey === val
      ).dicValue;
    },

    // 提交验证
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs[`form0`][0].validate(valid => {
          if (valid) resolve(this.cardData);
          reject("second");
        });
      });
    },

    watchSendSupplier(newVal, num) {
      this.cardData[num].taxpayerName = newVal.taxpayerName ?? "一般纳税人";
      this.cardData[num].taxPayerType = newVal.taxpayerId
        ? newVal.taxpayerId.toString()
        : "0";
      this.cardData[num].bankPersonName = newVal.bankPersonName ?? "";
      this.cardData[num].bankName = newVal.bankName ?? "";
      this.cardData[num].bankId = newVal.bankId ?? "";
    },

    watchResetSupplier(str, num) {
      this.cardData[num].bankPersonName = "";
      this.cardData[num].bankName = "";
      this.cardData[num].bankId = "";
      this[str](false);
    },

    ...mapActions(["setRemoveSupplier", "setRemoveSupplierB"])
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 260px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 4px;
}
.el-input,
.el-input__inner {
  width: 260px;
}
/deep/ .el-card,
/deep/ .el-card__header {
  border: 0;
}
</style>
